<template>
  <div class="details-card">
    <Anchors class="anchors" :anchors="tocAnchors" />
    <a-card class="article-details-card" :loading="article.id===0">
      <template #cover>
        <img
            class="article-cover"
            alt="example"
            src="https://api.ixiaowai.cn/gqapi/gqapi.php"
        />
      </template>
      <template #actions>
        <div><HeartOutlined key="like" /> Like ({{ article.like_count }})</div>
        <div><StarOutlined key="star" /> Star</div>
        <div><CommentOutlined key="comment" /> Comment ({{ article.comment_count }})</div>
      </template>
      <DetailsContent @anchor="anchorUpdate" :article="article" />
    </a-card>
  </div>
</template>

<script setup>
import DetailsContent from "./DetailsContent.vue";
import {HeartOutlined, StarOutlined, CommentOutlined} from "@ant-design/icons-vue";
import Anchors from "./Anchors.vue";
import {ref} from "vue";

const tocAnchors = ref([])

defineProps({
  article: Object
})

const anchorUpdate = anchor => {
  tocAnchors.value = anchor
}

</script>

<style scoped>
.details-card {
  position: relative;
}

.article-details-card {
  width: 1200px;
}

.article-cover {
  height: 300px;
  object-fit: cover;
}

.anchors {
  position: absolute;
  width: 200px;
  right: -220px;
}
</style>